<template>
  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-left xl:text-3xl">登录</h2>
  <Form ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" @keypress.enter="handleLogin">
    <FormItem name="username" class="enter-x">
      <Input
        v-model:value="formData.username" size="large" placeholder="用户名"
        class="fix-auto-fill"
      />
    </FormItem>
    <FormItem name="password" class="enter-x">
      <InputPassword
        v-model:value="formData.password"
        size="large"
        visibility-toggle
        placeholder="密码"
        class="fix-auto-fill"
      />
    </FormItem>

    <Row class="enter-x">
      <Col :span="12">
        <FormItem>
          <!-- No logic, you need to deal with it yourself -->
          <Checkbox v-model:checked="rememberMe" size="small">记住我</Checkbox>
        </FormItem>
      </Col>
    </Row>

    <FormItem class="enter-x">
      <a-button type="primary" size="large" block :loading="loading" @click="getCode">登录</a-button>
    </FormItem>
  </Form>
</template>

<script lang="ts" setup>
import { Checkbox, Col, Divider, Form, Input, Row } from 'ant-design-vue'
import {reactive, ref} from 'vue'
import { useGlobSetting } from '@/hooks/setting'
import { useFormRules, useFormValid } from '@/views/base/login/useLogin'
import { useUserStore } from '@/store/modules/user'
const FormItem = Form.Item
const InputPassword = Input.Password

const userStore = useUserStore()
const formRef = ref()
const loading = ref(false)
const rememberMe = ref(false)
const verify = ref()
const formData = reactive({
  username: 'u1',
  password: '123',
})

const { getFormRules } = useFormRules()
const { captchaEnable } = useGlobSetting()
const { validForm } = useFormValid(formRef)

// 获取验证码
async function getCode() {
  // 情况一，未开启：则直接登录
  if (captchaEnable === 'false') {
    await handleLogin({})
  }
  else {
    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
    // 弹出验证码
    verify.value.show()
  }
}

async function handleLogin(params) {
  const data = await validForm()
  try {
    loading.value = true
    await userStore.login({
      password: data.password,
      username: data.username,
    })
  } catch (error) {
    /*createErrorModal({
      title: t('sys.api.errorTip'),
      content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
      getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
    })*/
  }
  finally {
    loading.value = false
  }
}
</script>

<style scoped>

</style>
